<template>
  <el-descriptions
    class="margin-top"
    direction="vertical"
    title=""
    :column="col"
    size="default"
    border
  >
    <el-descriptions-item
      v-for="(item, index) in Object.keys(props.data)"
      :key="index"
    >
      <template #label>
        <div class="cell-item">{{ start + index }}{{ props.suffix }}</div>
      </template>
      <el-form-item v-if="!props.isReadonly">
        <el-input v-model="props.data[index]" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item v-else-if="!props.data[index]">
        <span></span>
      </el-form-item>
      <div v-else class="cell-item">{{ props.data[index] || " " }}</div>
    </el-descriptions-item>
    <el-descriptions-item v-if="Object.keys(props.data).length % col !== 0">
      <template #label>
        <div class="cell-item"></div>
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
defineOptions({
  name: "MESBATCHNUMBERRULEDESCRIPTIONS",
  inheritAttrs: false,
});

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  suffix: {
    type: String,
    default: () => {
      return "";
    },
  },
  column: {
    type: Number,
    default: () => {
      return null;
    },
  },
  start: {
    type: Number,
    default: () => {
      return 1;
    },
  },
});

const col = computed(() => props.column ?? Object.keys(props.data).length);
</script>

<style lang="scss" scoped>
.cell-item {
  text-align: center;
}
.el-form--inline .el-form-item {
  margin-right: 0;
}
</style>
